<template>
	<div class="app_list">
		<SearchBox @click="onJumpSearch" />
		<div class="list_tabs">
			<VanTabs
				v-model:active="selectedTabIndex"
				shrink
				@change="getList()"
			>
				<VanTab
					v-for="(item, index) in TAB_OPTION"
					:title="item.name"
					:key="index"
					:name="index"
				/>
			</VanTabs>
			<div
				v-if="[0,1].includes(selectedTabIndex)"
				class="list_display"
				:class="isEncode ? 'display_decode' : 'display_encode'"
				@click="toggleDisplay"
			>
				{{isEncode ? '显示' :  '隐藏'}}
			</div>
		</div>
		<VanList
			class="list_cust"
			v-if="custList.length"
			@load="getList(pageNo + 1)"
			v-model:loading="loading"
			:immediate-check="false"
			:finished="finished"
			finished-text="数据全部加载完毕～"
			loading-text="加载中..."
		>
			<CustCard
				v-for="card in custList"
				:key="card.id"
				:data="card"
				:is-encode="isEncode"
			/>
		</VanList>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { Tabs as VanTabs, Tab as VanTab, List as VanList } from 'vant'
import SearchBox from '@C/SearchBox/SearchBox'
import CustCard from '@C/CustCard/CustCard'
import { GetCustList } from '@/api'

const PAGE_SIZE = 20

const TAB_OPTION = [
	{
		certified: null,
		name: '全部',
	},
	{
		certified: 1,
		name: '已认证',
	},
	{
		certified: 0,
		name: '未认证',
	},
]

const isEncode = ref(true)
const toggleDisplay = () => (isEncode.value = !isEncode.value)

const onJumpSearch = () => {
	bjsdk.goTo('/search', {
		append: {
			isEncode: isEncode.value ? 1 : 0,
		},
	})
}

const selectedTabIndex = ref(0)
const custList = ref([])
const pageNo = ref(1)
const loading = ref(false)
const finished = ref(false)
const getList = async (targetPageNo = 1) => {
	finished.value = false
	if (targetPageNo === 1) {
		custList.value = []
	}
	const { data } = await GetCustList({
		certified: TAB_OPTION[selectedTabIndex.value].certified,
		pageNo: targetPageNo,
		pageSize: PAGE_SIZE,
	}).catch(() => ({}))
	const { lists, pageNo: _pageNo, total } = data
	custList.value = _pageNo === 1 ? lists : [...custList.value, ...lists]
	pageNo.value = _pageNo
	loading.value = false
	finished.value = _pageNo >= Math.ceil(total / PAGE_SIZE)
}
getList()
</script>

<style lang="less" scoped>
.app_list {
	.list_tabs {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		background: #f3f5f8;
		.van-tabs {
			--van-tabs-bottom-bar-width: 24px;
			--van-tabs-bottom-bar-hegiht: 6px;
			--van-padding-xs: 24px;
			--van-tab-font-size: 30px;
			--van-tab-text-color: #999;
			--van-tab-active-text-color: #333;
			--van-tabs-bottom-bar-color: #ed3636;
			:deep(.van-tabs__wrap) {
				height: auto;
				.van-tabs__nav {
					height: 48px;
					background: transparent;
					padding: 0 8px 14px;
					.van-tab--active {
						font-size: 32px;
					}
					.van-tabs__line {
						bottom: 0;
					}
				}
			}
		}
		.list_display {
			display: flex;
			align-items: center;
			margin: 10px 30px 0 0;
			font-size: 22px;
			line-height: 32px;
			color: #6f7a90;
			cursor: pointer;
			&::before {
				margin: 0 6px 0 0;
				width: 32px;
				height: 32px;
				background: center / contain no-repeat;
				content: '';
			}
			&.display_decode::before {
				background-image: url(~@IMG/icon_eye_show.png);
			}
			&.display_encode::before {
				background-image: url(~@IMG/icon_eye_hide.png);
			}
		}
	}
	.list_cust {
		margin: 4px 30px 0;
		.cust_card {
			margin: 20px 0 0;
		}
	}
}
</style>
